Gyazo ランディングページデザイン

https://gyazo.com/9dfcaffd1bb33bdd19f9b1131dc50329

概要

スクリーンショット撮影ツールGyazoのランディングページのデザインを行った。デザイン / 動線設計 / 実装までを担当。期間は構想からリリースまで10日間。かなりスピーディーに動いた。

背景

esports市場の拡大に伴いGyazoをゲーム用キャプチャとして利用するユーザも増加している。ところが現状のGyazoのランディングページはオフィスワーカーに向けた仕様になっており、ゲームユーザーに対する訴求力が低い問題を抱えている。そこでゲーム利用に特化したランディングページを新たに作成し、アプリのダウンロードCVRの向上を図ることにした。

プロセス

準備

目的とゴールを言葉にして明確化

KPIを設定し関連メンバー全員に共有

Google AnalyticsおよびMixpanelから現在のCVRを算出し、LPの更新による期待値を設定。

今回はこの準備フェーズをしっかり実施した。これまでの施策では効果計測が曖昧なケースが多く、成否に関わらずその後の学びに繋げることができていなかった。現状と実施後の差を明示することで、その理由を考えるきっかけにできるはず。

https://gyazo.com/a5fbe48527bb0a9d8176d50af844d4b7

コンセプト

今回のLPデザインで表現すべき性格のようなものをこの時点で整理しておく。現状のLPはオフィスツールとして「クリーン、シンプル、簡単、安心」のようなテーマを元に作られている。今回はゲームユーザー向けの性格づけとして「未来感、ワクワク感、エキサイティング」などの言葉を挙げた。

↓ 現状のランディングページ。コンテンツ・雰囲気共にゲームユーザにマッチしない

https://gyazo.com/69d504339fc8e203818dbedcf8d2c797

ワイヤーフレーム

時間短縮のために、基本的なレイアウトと雰囲気を見据えながらワイヤーフレームを作成した。

レイアウト検討時にはカラーを排除してグレースケールの強弱のみを加えた状態で行う。初めての試みだったがかなり効果的だった。最低限強調したい箇所を確認しながらバランスの当たりを取れる。

https://gyazo.com/2a7814546b0205cf34e19dc0ecf9d407

デザイン作成

メイン機能である動画キャプチャーを強調するために、Heroヘッダ部分の画像は動画を使用。

ただの動画ではなくmix-blend-modeの重ね技で未来感を演出した。

https://i.gyazo.com/bb230306d8bea3945292f036cb71095e.jpg

効果

検証中